<template>
  <div class="todo-container">
    <div ref="xxx" class="todo-wrap">
      <todo-header @addTodo="addTodo"/>
      <todo-list :todos="todos"/>
      <todo-footer 
        ref="footer" 
        :todos="todos" 
      />
    </div>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoList from './components/TodoList.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  name: 'App',
  components: {
    TodoHeader,
    TodoList,
    TodoFooter,
  },

  data () {
    return {
      todos: [
        // {id: '1', title: '吃饭', completed: false},
        // {id: '2', title: '睡觉', completed: true},
        // {id: 'abc', title: '打豆豆', completed: false},
      ]
    }
  },

  // 初始化读取local中保存和todos
  mounted () {
    this.todos = JSON.parse(localStorage.getItem('todos_key')) || []

    console.log(this.$refs)
    // 给footer组件对象绑定clearCompleteTodos事件监听
    // this.$refs.footer.$once('clearCompleteTodos', this.clearCompleteTodos)
    this.$refs.footer.$on('clearCompleteTodos', this.clearCompleteTodos)
    // this.$on('clearCompleteTodos', this.clearCompleteTodos) // 不可以, 给App绑定事件, Footer分发事件, 不调用回调

    // 给事件总线对象绑定deleteTodo的监听
    this.$bus.$on('deleteTodo', this.deleteTodo)

    // 给$emmiter绑定事件
    this.$emitter.on('toggleTodo', this.toggleTodo)
    // 给$PubSub订阅消息
    this.$PubSub.subscribe('checkAllTodos', (_, data) => {
      this.checkAllTodos(data)
    })
  },

  // 在组件死亡前, 解绑总线的事件
  beforeDestroy () {
    this.$bus.$off('deleteTodo')
    this.$emitter.off('toggleTodo')
    this.$PubSub.unsubscibe('checkAllTodos')
  },

  watch: {
    todos: {
      handler (value) {
        // 将最新的todos保存到local中
        localStorage.setItem('todos_key', JSON.stringify(value))
      },
      deep: true, // 深度监视
    }
  },

  methods: {
    // 添加todo
    addTodo (data) {
      // 创建一个新的todo对象
      const todo = {
        id: Date.now(),
        title: data,
        completed: false
      }
      // 添加到todos中
      this.todos.unshift(todo)
    },

    // 删除指定todo
    deleteTodo (id) {
      // 得到对应的下标
      const index = this.todos.findIndex(todo => todo.id===id)
      // 删除对应下标的todo
      this.todos.splice(index, 1)
    },

    // 对todo的状态取反
    toggleTodo (todo) {
      todo.completed = !todo.completed
    },

    // 全选或全不选
    checkAllTodos (isCheck) {
      this.todos.forEach(todo => todo.completed = isCheck)
    },

    // 清除已完成的todo
    clearCompleteTodos () {
      // debugger
      this.todos = this.todos.filter(todo => !todo.completed)
    }
  }
}
</script>

<style>
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>